<template>
  <el-container class="subnav">
    <el-header class=" placeholder q-header topbar">
      <!-- <el-tabs v-model="activeTab" type="card" style="width:450px;margin:auto" stretch>
        <el-tab-pane label="编辑" name="editor"></el-tab-pane>
        <el-tab-pane label="发布" name="publish"></el-tab-pane>
        <el-tab-pane label="统计" name="stastic"></el-tab-pane>
      </el-tabs> -->
      <ul class="top-outer" id="ooter">
        <li><router-link :to="'/detail/surveyPage/'+QID">编辑</router-link></li>
        <li><router-link :to="'/detail/publish/'+QID">发布</router-link></li>
        <li><router-link :to="'/detail/statistic/'+QID">统计</router-link></li>
      </ul>
    </el-header>
    <el-main>
      <router-view></router-view>
    </el-main>
  </el-container>
</template>

<script>
export default {
  name: "Detail",
  data() {
    return {
      activeTab: "",
      QID: -1
    };
  },
  mounted() {
    this.QID = this.$route.params.QID;
  }
};
</script>

<style scoped>
@media print {
  #ooter{
    display: none;
  }
}
.subnav .placeholder .topbar{
  background-color: white;
  border: none;
  box-shadow: 0 2px 7px 0 rgb(0 0 0 / 10%);
  /* height: 70px; */
}
.subnav .el-header{
  height: 70px;
  text-align: center;
  align-items: center;
  /* background-color: #E8F1F8; */
  }
.subnav .top-outer{
  width: 100%;
  display: flex;
  height: 50px;
  list-style:none;
  text-decoration: none;
  align-items: center;
}
.subnav .top-outer li{
  width: 100px;
  height: 100%;
  margin-top: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  /* width: 60px; */
  font-size: 24px;
  /* border:1px solid silver; */
  margin-right: 20px;
  box-shadow: 0 2px 7px 0 rgb(0 0 0 / 10%);
  transition: all 0.1s;
}
.subnav .top-outer li:hover{
  margin-top:5px;
  background-color: #E8F1F8;
}
.subnav .top-outer li a{
  text-decoration: none;
}
</style>